<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col">
			<view class="fun-flex-col group_2">
				<view class="fun-flex-col">
					<view class="fun-flex-row fun-justify-between fun-items-center section_2">
						<text class="font_2 text_4">Amount（$）</text>
						<text class="text_3">$10,000.00</text>
					</view>

					<view class="fun-flex-col list">
						<view class="fun-flex-col section_3 list-item mt-19">
							<view class="fun-flex-row fun-justify-between fun-items-center group_4">
								<text class="font_2 text_5">Type of transaction</text>
								<text class="font text_6" v-if='type == "recharge"'>Top-Up</text>
								<text class="font text_6" v-else>Withdrawal</text>
							</view>
							<view class="divider"></view>
							<view class="fun-flex-row fun-justify-between group_4">
								<text class="font_3 text_8">Transaction Fee</text>
								<text class="font text_9">$30.00</text>
							</view>
							<view class="divider_2"></view>
							<view class="fun-flex-row fun-justify-between fun-items-center group_4">
								<text class="font_3">Method</text>
								<text class="font text_6">ETH-Transfer</text>
							</view>
							<view class="divider_2"></view>
							<view class="fun-flex-row fun-justify-between fun-items-center group_4">
								<text class="font_3">Actual Amount</text>
								<view class="fun-flex-col fun-justify-start fun-items-start fun-relative group_7">
									<text class="font_4">2.86</text>
									<text class="font_4 text_12 pos">ETH</text>
								</view>
							</view>
						</view>

						<view class="fun-flex-col section_3 list-item mt-19">
							<view class="fun-flex-row fun-justify-between fun-items-center group_4">
								<text class="font_2 text_5">Transaction Status</text>
								<text class="font text_6">{{status}}</text>
							</view>
							<view class="divider view"></view>
							<view class="fun-flex-row fun-justify-between group_4">
								<text class="font_3 text_8">Order Number：</text>
								<text class="font">T202407090019489612019</text>
							</view>
							<view class="divider_2"></view>
							<view class="fun-flex-row fun-justify-between fun-items-center group_4">
								<text class="font_3" v-if='type == "recharge"'>Recharge Address： </text>
								<text class="font_3" v-else>Withdrawal Address： </text>
								<text class="font">TY3YD7CaVstBvoJToFTjiPbgd...</text>
							</view>
							<view class="divider_2"></view>
							<view class="fun-flex-row fun-justify-between fun-items-center group_4">
								<text class="font_3">Creation Time： </text>
								<text class="font">2024-07-09 19:23:49</text>
							</view>
							<template v-if="status == 'Successful'">
								<view class="divider_2"></view>
								<view class="fun-flex-row fun-justify-between fun-items-center group_4">
									<text class="font_3">Arrival time：</text>
									<text class="font">2024-07-09 19:41:49</text>
								</view>
							</template>

							<template v-if="status == 'Failed'">
								<view class="divider_2"></view>
								<view class="fun-flex-row fun-justify-between fun-items-center group_4">
									<text class="font_3">Cancellation time：</text>
									<text class="font">2024-07-09 19:41:49</text>
								</view>
							</template>

							<template v-if="status == 'In Process' && type == 'recharge'">
								<view class="divider_2"></view>
								<view class="fun-flex-row fun-justify-between fun-items-center group_4">
									<text class="font_3">Paid Amount : </text>
									<text class="font amount">1.02 ETH</text>
								</view>
							</template>

							<view class="divider_2"></view>

							<div v-if="status == 'In Process' && type == 'withdraw'">
								<view class="fun-flex-row fun-justify-between fun-items-center group_4 progress-switch"
									@click="isShowStep  = !isShowStep">
									<view class="view-progress">Progrees</view>
									<image class="arrow" v-show='!isShowStep'
										src="../../../static/235ec6d72e8cce70ffd36bb80fafbff3.png" />
									<image class="arrow down" v-show='isShowStep'
										src="../../../static/235ec6d72e8cce70ffd36bb80fafbff3.png" />
								</view>
								<view class="divider_2"></view>
								<view class="fun-flex-col step-wrap" v-show='isShowStep'>
									<view class="fun-flex-row fun-justify-between fun-items-center item">
										<view class="fun-flex-row fun-items-center left">
											<image class="fun-shrink-0 image_5"
												src="/..../../static/5b8472324b9ecf819b3283abe5f904e8.png" />
											<text class="fun-ml-8 font_3 text_7 step">Application Submitted </text>
										</view>
										<text class="date">6-5 14:37</text>
										<view class="text-line"></view>
									</view>

									<view class="fun-flex-row fun-justify-between fun-items-center item">
										<view class="fun-flex-row fun-items-center left">
											<image class="fun-shrink-0 image_5"
												src="/..../../static/5b8472324b9ecf819b3283abe5f904e8.png" />
											<text class="fun-ml-8 font_3 text_7 step">Risk Control and Anti-Money
												Laundering Investigation </text>
										</view>
										<text class="date">6-5 14:38</text>
										<view class="text-line"></view>
									</view>
									<view class="fun-flex-row fun-justify-between fun-items-center item">
										<view class="fun-flex-row fun-items-center left">
											<image class="fun-shrink-0 image_5"
												src="/..../../static/5b8472324b9ecf819b3283abe5f904e8.png" />
											<text class="fun-ml-8 font_3 text_7 step">Processing from the trading
												desk</text>
										</view>
										<text class="date">6-5 14:39</text>
										<view class="text-line"></view>
									</view>
									<view class="fun-flex-row fun-justify-between fun-items-center item">
										<view class="fun-flex-row fun-items-center left">
											<image class="fun-shrink-0 image_5"
												src="/..../../static/5b8472324b9ecf819b3283abe5f904e8.png" />
											<text class="fun-ml-8 font_3 text_7 step">Initiation of transfer
												instructions</text>
										</view>
										<text class="date">6-5 14:40</text>
										<view class="text-line"></view>
									</view>
									<view class="fun-flex-row fun-justify-between fun-items-center item">
										<view class="fun-flex-row fun-items-center left">
											<view class="fun-flex-row fun-justify-center fun-items-center final">
												<view class="final-ball"></view>
											</view>
											<text class="fun-ml-8 font_3 text_7 step">Transfer Successful </text>
										</view>
									</view>
								</view>
							</div>

							<template v-if="status == 'In Process' && type == 'recharge'">
								<view class="fun-flex-col fun-self-stretch group_6 scan-wrap">
									<view class="title">This order will be closed soon, we recommend you to deal with it as soon as
										possible.</view>
									<image class="fun-self-center image_5"
										src="../../../static/42fdebdb9a867ed12ff964a694a804bd.png" />
									<view class="text_13 copy" @click="copy">Copy the Address</view>
	
								</view>
							</template>

							<view class="fun-flex-col fun-justify-center fun-items-center group_4 tips" v-else>
								<template v-if="status == 'Successful'">
									<view>The transaction was successful! You can check it</view>
									<view>in My Wallet - Available Amount.</view>
								</template>
								<template v-if="status == 'Failed'">
									<view>Your order has expired. Please try again.</view>
								</template>
							</view>
						</view>
					</view>
				</view>


				<view class="fun-flex-col fun-items-center mt-31">
					<text class="text_27">Have questions about the deal?</text>
					<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper mt-13">
						<text class="font_5 text_28">Enquiry</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				isShowStep: false,
				status: "",
				type: "",
				items: [null, null],
			};
		},
		onLoad(options) {
			this.status = options?.status;
			this.type = options?.type;
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: 'TY3YD7CaVstBvoJToFTjiPbgdfF7x5MzB',
					success: function() {
						console.log('success');
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.mt-19 {
		margin-top: 38rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-31 {
		margin-top: 62rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.page {
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding-bottom: 70px;

		.group {
			padding-left: 68rpx;
			padding-right: 28rpx;

			.text {
				color: #ffffff;
				font-size: 30rpx;
				font-family: SF Pro Text;
				font-weight: 600;
				line-height: 22.18rpx;
			}

			.image {
				width: 34rpx;
				height: 28rpx;
			}

			.image_2 {
				width: 30rpx;
				height: 28rpx;
			}

			.image_3 {
				width: 48rpx;
				height: 28.72rpx;
			}
		}

		.section {
			padding: 20rpx 32rpx;
			background-color: #00033b;

			.image_4 {
				width: 48rpx;
				height: 48rpx;
			}

			.text_2 {
				font-size: 32rpx;
				line-height: 22.82rpx;
			}
		}

		.group_2 {
			padding: 28rpx 32rpx 0;

			.section_2 {
				padding: 52rpx 16rpx 40rpx 32rpx;
				background-color: #1b1d53;
				border-radius: 14rpx;

				.text_4 {
					line-height: 28.82rpx;
				}

				.text_3 {
					color: #ffffff;
					font-size: 56rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					line-height: 52.04rpx;
				}
			}

			.list {
				padding-top: 38rpx;

				.section_3 {
					padding: 0 32rpx;
					background-color: #1b1d53;
					border-radius: 14rpx;

					.group_3 {
						padding: 36rpx 0;

					}

					.divider {
						background-color: #ffffff24;
						height: 2rpx;
					}

					.group_4 {
						padding: 32rpx 0;

						.text_8 {
							line-height: 22.56rpx;
						}

						.amount {
							font-weight: bold;
							font-size: 32rpx;
						}

						.group_7 {
							width: 230.4rpx;

							.font_4 {
								font-size: 48rpx;
								font-family: SF Pro Display;
								line-height: 35.34rpx;
								font-weight: 700;
								color: #ffffff;
							}

							.text_12 {
								line-height: 33.82rpx;
							}

							.pos {
								position: absolute;
								right: 0;
								top: 0;
							}
						}
					}

					.divider_2 {
						background-color: #b0b1bf24;
						height: 2rpx;
					}

					.group_5 {
						padding: 40rpx 0 32rpx;

						.group_6 {
							margin-right: 24rpx;

							.text_10 {
								line-height: 21.14rpx;
							}

							.text_11 {
								line-height: 21.42rpx;
							}
						}
					}

					.font_3 {
						font-size: 30rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						color: #ffffff;
					}
				}

				.list-item {
					&:first-child {
						margin-top: 0;
					}
				}
			}

			.font_2 {
				font-size: 30rpx;
				font-family: SF Pro Display;
				line-height: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}

			.text_27 {
				color: #7f819d;
				font-size: 26rpx;
				font-family: SF Pro Display;
				line-height: 22.86rpx;
			}

			.text-wrapper {
				padding: 12rpx 0;
				background-color: #ffffff33;
				border-radius: 24rpx;
				width: 172rpx;
				border-left: solid 2rpx #ffffff1a;
				border-right: solid 2rpx #ffffff1a;
				border-top: solid 2rpx #ffffff1a;
				border-bottom: solid 2rpx #ffffff1a;

				.font_5 {
					font-size: 24rpx;
					font-family: SF Pro Display;
					color: #ffffff;
				}

				.text_28 {
					font-size: 22rpx;
				}
			}
		}

		.font {
			white-space: nowrap;
			/* 确保文本在一行内显示 */
			overflow: hidden;
			/* 隐藏超出容器的内容 */
			text-overflow: ellipsis;
			/* 使用省略号表示被截断的文本 */
			flex: 0.9;
			font-size: 28rpx;
			font-family: SF Pro Display;
			color: #ffffff;
			text-align: right;
		}

		.tips {
			font-size: 12px;
			color: #999;
		}

		.progress-switch {
			.view-progress {
				font-size: 15px;
				color: #FFFFFF;

			}

			.arrow {
				width: 20px;
				height: 22px;
			}

			.down {
				transform: rotate(90deg);
			}
		}

		.step-wrap {
			padding: 60rpx 0;

			.item {
				position: relative;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				.date {
					font-size: 12px;
					color: #999;
				}

				.left {
					width: 80%;

					.step {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						flex: 0.9;
					}

					.final {
						width: 32rpx;
						height: 32rpx;

						&-ball {
							width: 16rpx;
							height: 16rpx;
							background: rgba(255, 255, 255, 0.2);
							border-radius: 50%;
						}
					}
				}

				.text-line {
					position: absolute;
					width: 2rpx;
					height: 80rpx;
					background: #5B5C83;
					top: 36rpx;
					left: 16rpx;
					z-index: 2;
				}
			}

			.item:not(:last-child) {
				padding-bottom: 60rpx;
			}
		}
		.scan-wrap{
			padding: 48rpx 40rpx;
			.title{
				color: #7F819D;
				text-align: center;
				font-size: 24rpx;
			}
			image{
				width: 164px;
				height: 164px;
				margin: 40rpx 0;
			}
			.copy{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #5CEEC4;
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 16px;
				color: #000000;
			}
		}
	}
</style>